<template>
	<tm-fullView>
		<template v-slot:default="{info}">
			<view class="grey text " :class="$tm.vx.state().tmVuetify.black?'black bk':''" :style="{minHeight:info.height+'px'}">
				<tm-menubars title="tm-tranlate" color="bg-gradient-blue-accent"  :showback="true"></tm-menubars>
				
				<tm-sheet :shadow="24">
					<view class="text-size-s text-weight-b">进场动画</view>
					
					<view class=" mt-24">
						<view class="flex-between">
							<tm-translate ref="a_1"  animation-name="fadeIn">
								<tm-button @click="$refs.a_1.play()" theme="blue">渐隐进</tm-button>
							</tm-translate>
							<tm-translate ref="a_2"  animation-name="fadeOut"><tm-button @click="$refs.a_2.play()" theme="blue">渐隐出</tm-button></tm-translate>
						</view>
						<view class="flex-between">
							<tm-translate ref="a_3"  animation-name="fadeDown"><tm-button  @click="$refs.a_3.play()" theme="blue">下到下</tm-button></tm-translate>
							<tm-translate ref="a_4" animation-name="fadeUp"><tm-button  @click="$refs.a_4.play()" theme="blue">下到上</tm-button></tm-translate>
						</view>
						<view class="flex-between">
							<tm-translate ref="a_5" animation-name="zoomIn"><tm-button  @click="$refs.a_5.play()" theme="blue">大到小</tm-button></tm-translate>
							<tm-translate ref="a_6" animation-name="zoomOut"><tm-button  @click="$refs.a_6.play()" theme="blue">正常到无</tm-button></tm-translate>
						</view>
						<view class="flex-between">
							<tm-translate ref="a_7" animation-name="fadeLeft"><tm-button  @click="$refs.a_7.play()" theme="blue">右到左</tm-button></tm-translate>
							<tm-translate ref="a_8" animation-name="fadeRight"><tm-button  @click="$refs.a_8.play()" theme="blue">左到右</tm-button></tm-translate>
						</view>
					</view>
				</tm-sheet>
				
				<tm-sheet :shadow="24">
					<view class="text-size-s text-weight-b ">关闭自动播放，手动播放</view>
					
					<view class=" mt-24">
						<tm-button @click="$refs.ani.play()" theme="bg-gradient-orange-accent" >播放动画</tm-button>
						
						<tm-translate :auto="false" ref="ani" animation-name="zoomIn">
							<view style="width: 100upx;height: 100upx;" class="flex-center d-block">我来啦</view>
						</tm-translate>
						
					</view>
				</tm-sheet>
				
				<view style="height: 50upx;"></view>
			</view>
		</template>
	</tm-fullView>

</template>

<script>
	import tmFullView from "@/tm-vuetify/components/tm-fullView/tm-fullView.vue"
	import tmMenubars from "@/tm-vuetify/components/tm-menubars/tm-menubars.vue"
	import tmSheet from "@/tm-vuetify/components/tm-sheet/tm-sheet.vue"
	import tmTranslate from "@/tm-vuetify/components/tm-translate/tm-translate.vue"
	import tmButton from "@/tm-vuetify/components/tm-button/tm-button.vue"
	export default {
		components:{tmFullView,tmMenubars,tmSheet,tmTranslate,tmButton},
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style>
